前两篇介绍完了ItemDecoration的基本用法。这次打算用ItemDecoration做点好玩的——实现stickyHeader效果。如图：
我们从动画可以看出，其实头部有种，一种跟ItemView在同一层级，类似一个不同type的Item；另外一个始终保持在最上层，并且滑动到每组的最后一个item时，会有一个被顶上去，或者被拉下来的效果。
我们继续分析下，应该如何实现：
与
itemView同一层级的header，我们可以把它当做是一个divider，通过getItemOffsets和onDraw来处理，且每组第一个Item的上方才显示。浮在
itemView上层的header，很明显可以通过onDrawOver来实现。-
浮在
itemView上层的header被顶上去和被拉下来的效果，只需要当每组最后一个Item的bottom小于header的height时，让header跟随这个item就行，换句话说就是此时让header的bottom等于firstItem的bottom。（有点绕的话，结合下面的图看看）
还有最后一个问题需要确认，那就是哪个item是每组的开始，哪个Item是每组的结束。 这个问题跟我们能拿到的数据集合有关。有可能拿到的是类似IOS那样：title是List<A>集合，Item是分好组的List<List<B>>集合（IOS的小伙伴说的，应该没骗我，indexPath我听过）；也有可能拿到就是一个List<B>集合,泛型 B有个字段作为title，title相同便是同一分组。总之不管数据集合是怎么样的，我们都需要确认那个item是每组的开始，哪个item是每组的结束。假定我们拿到的就是一个List<B>形式的集合，item的实体类如下:
public class AppInfoBean {
public String name;
public String url;
public String tag;
public AppInfoBean(String name, String url,String tag) {
this.name = name;
this.url = url;
this.tag = tag;
}
}
具体应该如何判断呢，首先，position为0肯定是第一组的开始；position为List.size（）-1 肯定是最后一组的结束；其他position，如果当前的tag与上一个position的tag不等，那么肯定是某组的开始，如果当前的tag与下一个position的tag不等，那么肯定是某组的结束。定义一个类来描述每个Item的开始，结束状态:
public class SectionBean {
public boolean isGroupStart;
public boolean isGroupEnd;
}
上面的分析，可以总结成如下代码：
SectionBean tag;
if (position == 0) {
tag.isGroupStart = true;
tag.isGroupEnd = !mDatas.get(position).tag.equals(mDatas.get(position + 1).tag);
} else if (position == mDatas.size() - 1) {
tag.isGroupStart = !mDatas.get(position).tag.equals(mDatas.get(position - 1).tag);
tag.isGroupEnd = true;
} else {
tag.isGroupStart = !mDatas.get(position).tag.equals(mDatas.get(position - 1).tag);
tag.isGroupEnd = !mDatas.get(position).tag.equals(mDatas.get(position + 1).tag);
}
至于这个判断放在什么地方，就看大家的见解了。我这里选择在adapter的onBindViewHolder中生成每个position对应的SectionBean，通过itemview的setTag方法存起来，这样的话，在ItemDecoration可以通过getTag取出来，具体代码如下：（当然直接在ItemDecoration中做判断也可以）
@Override
public void onBindViewHolder(StickHeaderVH holder, int position) {
holder.sdvPic.setImageURI(mDatas.get(position).url);
holder.tvTitle.setText(mDatas.get(position).name);
generateTag(holder, position);
}
private void generateTag(StickHeaderVH holder, int position) {
SectionBean tag;
// 没有tag的话 new 一个, 有的话 复用
if (holder.itemView.getTag() == null) {
tag = new SectionBean();
} else {
tag = (SectionBean) holder.itemView.getTag();
}
// 判断当前position的开始结束状态
if (position == 0) {
tag.isGroupStart = true;
tag.isGroupEnd = !mDatas.get(position).tag.equals(mDatas.get(position + 1).tag);
} else if (position == mDatas.size() - 1) {
tag.isGroupStart = !mDatas.get(position).tag.equals(mDatas.get(position - 1).tag);
tag.isGroupEnd = true;
} else {
tag.isGroupStart = !mDatas.get(position).tag.equals(mDatas.get(position - 1).tag);
tag.isGroupEnd = !mDatas.get(position).tag.equals(mDatas.get(position + 1).tag);
}
holder.itemView.setTag(tag);
}
经过最开始的分析，与ItemView同一层级的header其实就是一个有文字的divider，只有每组的第一个Item才显示，这个很好处理，代码如下(文字居中的处理其实有很多细节可以抠的，有机会单独列出)：
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
// 如果是头部
if (((SectionBean) view.getTag()).isGroupStart) {
outRect.set(0, (int) mDividerHeight, 0, 0);
}
}
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View view = parent.getChildAt(i);
int position = parent.getChildAdapterPosition(view);
// 如果是头
if (position != RecyclerView.NO_POSITION
&& ((SectionBean) view.getTag()).isGroupStart) {
drawHeader(c, parent, view, position);
}
}
}
/**
* 画头部
*
* @param c
* @param parent
* @param view
* @param position
*/
private void drawHeader(Canvas c, RecyclerView parent, View view, int position) {
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) view.getLayoutParams();
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
int bottoom = view.getTop() - params.topMargin - Math.round(ViewCompat.getTranslationY(view));
int top = (int) (bottoom - mDividerHeight);
// 计算文字居中时候的基线
Rect targetRect = new Rect(left, top, right, bottoom);
Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
c.drawRect(left, top, right, bottoom, mPaint);
c.drawText(mDatas.get(position).tag, left, baseline, mTextPaint);
}
接下来再处理浮在顶层的header，上面已经分析过了，这个header一般情况下都是固定在recyclerView的顶部，只有达到临界点后，其底部才会跟随第一个可见ItemView的底部，所以我们只需要着重留意下临界点就行了，代码如下：
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
View view = parent.getChildAt(0);
View view2 = parent.getChildAt(1);
if (view != null && view2 != null) {
SectionBean section1 = (SectionBean) view.getTag();
SectionBean section2 = (SectionBean) view2.getTag();
int position = parent.getChildAdapterPosition(view);
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
int bottoom = (int) mDividerHeight;
int top = 0;
// 判断是否达到临界点
// (第一个可见item是每组的最后一个,第二个可见tiem是下一组的第一个,并且第一个可见item的底部小于header的高度)
// 这里直接判断item的底部位置小于header的高度有点欠妥,应该还要考虑paddingtop以及margintop,这里展示不考虑了
if (section1.isGroupEnd && section2.isGroupStart && view.getBottom() <= mDividerHeight) {
bottoom = view.getBottom();
top = (int) (bottoom - mDividerHeight);
}
// 计算文字居中时候的基线
Rect targetRect = new Rect(left, top, right, bottoom);
Paint.FontMetricsInt fontMetrics = mTextPaint.getFontMetricsInt();
int baseline = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
// 背景
c.drawRect(left, top, right, bottoom, mPaint);
// 文字
c.drawText(mDatas.get(position).tag, left, baseline, mTextPaint);
}
}
这样基本上就OK了， 唯一的遗憾就是header不能点击啊。。。。源码点我
